<template>
  <view class="baseForm">
    <view class="overhidden">
      <view class="plan card record-content">
        <view class="title">作业方法</view>
        <view class="">
          {{
            taskInfo?.sopItem?.sopItemMethod
              ? taskInfo?.sopItem?.sopItemMethod
              : "暂无方法"
          }}
        </view>
        <view class="title">作业工具</view>
        <view class="">
          {{
            taskInfo?.sopItem?.sopItemTool
              ? taskInfo?.sopItem?.sopItemTool
              : "暂无工具"
          }}
        </view>
        <view class="title">附件</view>
        <uploadFileDetail
          v-if="taskInfo?.itemImages?.length > 0"
          :multiple="false"
          :keys="4545"
          :list="taskInfo.itemImages ?? []"
          :capture="capture"></uploadFileDetail>
      </view>
      <!-- <u-form
        v-if="taskInfo?.sopItem?.id"
        labelPosition="top"
        :model="taskInfo"
        labelWidth="300"
        ref="uForm"
        class="form"
        errorType="toast">
      
        
        <view class="plan card record-content">
          <view class="title">附件信息</view>
          {{ taskInfo?.sopItem?.sopItemTool }}
           <u-form-item label="作业方法" v-if="taskInfo?.sopItem?.sopItemMethod">
            <u--textarea
              v-model="taskInfo?.sopItem?.sopItemMethod"
              placeholder="请输入故障描述"
              height="45px"
              :customStyle="{
                marginTop: '2px',
              }"></u--textarea>
          </u-form-item>

           <u-form-item label="附件" v-if="taskInfo?.itemImages?.length > 0">
            <uploadFileDetail
              :multiple="false"
              :keys="4545"
              :list="taskInfo.itemImages ?? []"
              :capture="capture"></uploadFileDetail>
          </u-form-item>
        </view>
      </u-form> -->
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, reactive, toRaw, computed, nextTick } from "vue";
import { http } from "@/utils/http";
import UploadImage from "@/components/upload-image-ssr.vue";
import uploadFileDetail from "@/components/upload-file-detail.vue";
import ScanBar from "@/components/scan-bar/index.vue";
import dayjs from "dayjs";
import { useEamStore } from "@/stores/useEamStore";
import { onPageScroll, onShow, onLoad } from "@dcloudio/uni-app";
const taskInfo = ref({});
onShow(() => {
  // getPositionList();
  nextTick(() => {
    taskInfo.value = guideBookData.value;
  });
});
const guideBookData = computed(
  () => JSON.parse(useEamStore().guideBookData) || {}
);

// 监控设备选择id
// watch(
//   () => guideBookData,
//   async (newVal) => {
//     taskInfo.value = newVal.value;
//   },
//   {
//     deep: true,
//     immediate: true,
//   }
// );
// 摄像头参数设置
const capture = ref(["camera", "album"]);
</script>

<style lang="scss" scoped>
.baseForm {
  padding-bottom: 50px;
}

.handle-ok {
  min-width: 75px;
  color: #19be6b;
}
.card {
  background-color: #fff;
  margin: 10px 10px;
  border-radius: 8px;
  padding: 12px 12px;
  transition: all 300ms ease;
  box-shadow: 0 2px 6px rgba(3, 121, 255, 0.05);
}

.overhidden {
  overflow: hidden;
}

uni-page-body {
  height: 100%;
  background-color: #fbfbff;
}

.u-divider {
  margin: 10px 0;
}

.baseForm {
  background-color: #fbfbff;
  display: block;
}

.title {
  font-size: 16px;
  margin: 6px 0 14px;
  font-weight: bold;
  .u-icon {
    margin-right: 3px;
  }
}

.submit_btn {
  margin: 60rpx 20rpx;
  border-radius: 60rpx;
  height: 45px;
  font-size: 16px;
  line-height: 45px;
  box-shadow: 0 1px 10px rgba(3, 121, 255, 0.3);
}
.grey_btn {
  background-color: #fff !important;
  border: 1px solid #999;
  box-shadow: 0 1px 10px rgba(22, 37, 78, 0.08);
  color: #4f4f4f;
}

.searchScan {
  display: flex;
  height: 37px;
  padding: 12px 12px 0px;
  :deep(.u-input) {
    border: none;
    background-color: #fff !important;
    box-shadow: 0 1px 8px 0px rgb(19 10 236 / 8%);
  }
  .addBtn1 {
    width: 60px;
    height: 36px;
    margin-left: -3px !important;
    :deep(.u-button__text) {
      font-size: 14px !important;
    }
  }
}
:deep(.u-form-item__body) {
  padding: 4px 0 12px;
}
:deep(.u-form-item) {
  .u-form-item__body__left__content__label {
    color: #a8b2bb;
    font-size: 14px;
    margin-bottom: 1px;
  }
  .u-form-item__body__left__content__required {
    font-size: 16px;
  }
  // 单选不可编辑样式
  .u-radio {
    .u-radio__icon-wrap--disabled {
      background-color: rgb(255, 255, 255) !important;
    }
    .u-radio__icon-wrap--disabled--checked {
      background-color: rgb(41, 121, 255) !important;
      border-color: rgb(41, 121, 255) !important;
      .u-icon__icon {
        color: #fff !important;
      }
    }
    .u-radio__text {
      color: #16254e !important;
      font-size: 14px !important;
    }
  }

  .u-textarea--disabled {
    background-color: #fff !important;
  }
  .uni-textarea-textarea {
    color: #16254e !important;
  }

  .input-box {
    width: 100%;
    border: 0.5px solid #dadbde !important;
    border-radius: 4px;
    .u-input {
      pointer-events: none;
      height: 34px;
      padding-left: 10px !important;
    }
    image {
      padding: 7px 6px;
      width: 20px;
      height: 20px;
    }
  }
}

.mt-10- {
  margin-top: -30px;
}
</style>
